<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实现商品列表</title>
</head>
<style>
         ul {
            display: flex;
            justify-content: space-around;
            margin: 0;
            padding: 0;
            margin: 10px auto;
            flex-wrap: wrap;
            font-size: 16px;
            font-weight: 600;
        }
        ul li {
            list-style: none;
            border: 1px solid #ccc;
            box-shadow: 0px 0px 5px 0px #000;
            text-align: left;
            width: 220px;
            height: 380px;
            margin-bottom: 10px;
        }
        ul li p:nth-of-type(1){
            font-size: 20px;
            text-align: center;
        }
        ul li p:nth-of-type(2)>span{
            font-weight: 800;
            font-size: 20px;
            text-decoration: line-through;
        }
        ul li p:nth-of-type(3)>span{
            color: red;
            font-size: 20px;
            font-weight: 800;
        }
        img{
            width: 180px;
            height: 120px;
            margin-left: 20px;
        }
</style>
<body>
    <div id="one">
        <img src="" alt="">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    <h1>根据数据生成一个商品列表</h1>
    <button id="one1">根据价格排序</button>
    <button id="one2">根据销量排序</button>
    <button id="one3">更具评价排序</button>
</div>
    <ul id="list">
    </ul>
    <script>
        var shouji = [{id: '001',name: 'iphone7 plugs',imgurl: 'img/ip7.jpg',price: 5899.00,sale: 5888.00,color: '土豪金',evaluate: 288,sales: 1230
        }, 
        {id: '002',name: 'Note7',imgurl: 'img/note7.jpg',price: 3899.00,sale: 998.00,color: '黑色',evaluate: 289,sales: 439
        }, 
        {id: '003',name: '荣耀7',imgurl: 'img/honor7.jpg',price: 1999.00,sale: 1899.00,color: '白色',evaluate: 438,sales: 908
        },
        {id: '004',name: 'iphone7 plugs',imgurl: 'img/ip7.jpg',price: 5999.00,
        sale: 5808.00,color: '土豪金',evaluate: 223,sales: 986
        }, 
        {id: '005',name: 'Note7',imgurl: 'img/note7.jpg',price: 3892.00,sale: 998.00,color: '黑色',evaluate: 88,sales: 8798
        }, 
        {id: '006',name: '荣耀7',imgurl: 'img/honor7.jpg',price: 1929.00,sale: 1099.00,color: '白色',evaluate: 2088,sales: 453
        }, 
        {id: '007',name: 'iphone7 plugs',imgurl: 'img/ip7.jpg',price: 4899.00,
        sale: 2888.00,color: '土豪金',evaluate: 2880,sales: 88
        }, 
        {id: '008',name: 'Note7',imgurl: 'img/note7.jpg',price: 5876.00,sale: 998.00,color: '黑色',evaluate: 3288,sales: 99
        }, 
        {id: '009',name: '荣耀7',imgurl: 'img/honor7.jpg',price: 4999.00,sale: 1899.00,color: '白色',evaluate: 1288,sales: 645
        }, 
        {id: '010',name: 'iphone7 plugs',imgurl: 'img/ip7.jpg',price: 5888.00,
        sale: 2899.00,color: '土豪金',evaluate: 2288,sales: 34
        }, 
        {id: '011',name: 'Note7',imgurl: 'img/note7.jpg',price: 3299.00,sale: 978.00,color: '黑色',evaluate: 28,sales: 1213
        }, 
        {id: '012',name: '荣耀7',imgurl: 'img/honor7.jpg',price: 1976.00,sale: 1899.00,color: '白色',evaluate: 3243,sales: 123
        }];
        
      function res(){
        //   渲染数据
        for (var i = 0; i < shouji.length; i++) {
            list.innerHTML += '<li>' +
                '<img src="'+shouji[i].imgurl+'">'+
                ' <p>' + shouji[i].name + '</p>' +
                ' <p>原价：<span>￥'+ shouji[i].price +'</span></p>' +
                ' <p>现价：<span>￥' + shouji[i].sale +'</span></p>' +
                ' <p>颜色：' + shouji[i].color + '</p>' +
                ' <p>评价：' + shouji[i].evaluate + '</p>' +
                ' <p>销量：' + shouji[i].sales+ '</p>' +
                '</li>';
        }
      }
     res();
    //  现价降序排列
     one1.onclick=function(){
            list.innerHTML='';
            var lift=shouji.sort(function(a,b){
                return b.sale-a.sale;
        });

        res();
        }
    // 销量降序排列
        one2.onclick=function(){
            list.innerHTML='';
            var lift=shouji.sort(function(a,b){
                return b.sales-a.sales;
        });

        res();
        }
    // 评价降序排列
        one3.onclick=function(){
            list.innerHTML='';
            var lift=shouji.sort(function(a,b){
                return b.evaluate-a.evaluate;
        });
        res();
        }  
    </script>
    
</body>
</html>